<!--
 * @Author: atao
 * @Date: 2023-12-14 16:12:56
 * @LastEditTime: 2023-12-14 17:30:49
 * @FilePath: \yayun-web000\src\components\MyMenu.vue
-->
<template>
    <el-menu default-active="1-4-1" 
                        background-color="#001628" 
                        text-color="#ddd" 
                        active-text-color="#fff"
                            :collapse="isCollapse">
                            <el-submenu index="1">
                                <template v-slot:title>
                                    <i class="el-icon-location"></i>
                                    <!-- v-slot:名字="参数" === slot="名字" slot-scop="参数"  -->
                                    <span slot="title">导航一</span>
                                </template>
                                <el-menu-item index="1-4-1">选项4</el-menu-item>
                                <el-submenu index="1-5">
                                    <template slot="title">
                                        <i class="el-icon-location"></i>
                                        <span slot="title">选项1</span>
                                    </template>
                                    <el-menu-item index="1-5-1">选项4</el-menu-item>
                                </el-submenu>         
                                <el-submenu index="1-6">
                                        <template slot="title">
                                            <i class="el-icon-location"></i>
                                            <span slot="title">选项1</span>
                                        </template>
                                        <el-menu-item index="1-6-1">选项4</el-menu-item>
                                </el-submenu>                         
                            </el-submenu>
                        </el-menu>
</template>
<script>
    export default {
        props:{
            isCollapse:{
                type:Boolean,
                default:false
            }
        },
        created(){
            let menu = this.$store.getters.MenuList;
            
            function loop(arr,pid){
                let newArr = [];
                let _arr=arr.filter(it=>(!pid?!it.parent_id:it.parent_id==pid))
                newArr=_arr.map(it=>{
                    if(arr.findIndex(it1=>it1.parent_id==it.id)>-1){
                        it.children=loop(arr,it.id)
                    }
                    return it
                })
                return newArr
            }
            let arr = loop(menu)
            console.log(arr)
        },
    }
</script>
